<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>节点资源</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<!-- 新 Bootstrap 核心 CSS 文件 
jQuery文件。务必在bootstrap.min.js 之前引入
 最新的 Bootstrap 核心 JavaScript 文件 -->
<link rel="stylesheet" href="./js/bootstrap_3.3.5/css/bootstrap.css">
<script src="./js/jquery_1.11/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap_3.3.5/js/bootstrap.js"></script>
<!-- ztree  -->
<link href="./js/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="./js/ztree/js/jquery.ztree.all-3.5.js"></script>



<!-- highcharts  -->
<script src="./js/highcharts/highcharts.src.js"></script>

<!-- md5  -->
<script type="text/ecmascript" src="./js/md5/md5.js"></script>

<!-- alert  -->
<link href="./js/select/select.css" rel="stylesheet">


</head>
<body>

	<div id="header"></div>



	<div class="container-fluid" style="margin-top: 10px;">
		<div class="row">
			<div class="col-sm-3 col-md-3 " style="padding-right: 0px;">
				<div class="panel panel-default">
					<div
						style="text-decoration: none; text-shadow: 0 1px 0 #fff; color: #555; font-size: 13px; padding-right: 0px; padding-left: 10px; padding-top: 2px; padding-bottom: 2px"
						class="panel-heading">节点树</div>
					<div class="panel-body" style="padding-left: 5px;">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
			<!-- end 3 -->
			<div class="col-sm-9 col-md-9" style="padding-left: 0px;">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12 col-md-12 ">
							<div class="panel panel-default">
								<!-- Default panel contents -->
								<div
									style="text-decoration: none; text-shadow: 0 1px 0 #fff; color: #555; font-size: 13px; padding-right: 0px; padding-left: 10px; padding-top: 2px; padding-bottom: 2px"
									class="panel-heading">节点</div>
								<div class="panel-body">
									<div id="resourceright"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- end row -->
				</div>
				<!-- end container-fluid -->
			</div>
			<!-- end 10 -->
		</div>
	</div>



	<script language="JavaScript">
		$.get("header.html", function(data) {
			$("#header").html(data);
		});

		//tree init
		var project = "/dt";
		var setting = {
			showLine : true,
			data : {
				key : {
					title : "mark"
				},
				simpleData : {
					enable : true
				}
			},
			callback : {
				onClick : NodeClick
			}
		};

		var curmetric_id = "";
		var curnode = "";

		function selectChart() {

			$.ajax({
				type : "POST",
				url : project + "/api/mn/queryResourceByMetric.do",
				data : {
					metric_id : curmetric_id,
					node_id : curnode,
					data_interval : $("#selectday ").val()
				},
				dataType : 'json',
				success : function(res) {
					var mdata = res.data;
					var vid = hex_md5(mdata.node_id + mdata.metric_id);
					console.log(vid);
					showinit(mdata.option, mdata.showtype, vid);
				}
			});
		}

		function NodeClick(event, treeId, treeNode, clickFlag) {
			console.log(event);
			console.log(treeId)
			console.log("treeNode", treeNode)
			console.log(clickFlag)
			window.res_node = treeNode.node;
			/*非常疯狂的取数*/
			var metrics = [];
			var node_id = "";
			var htmlfill = "";
			if (treeNode.dtype == "node") {
				metrics = treeNode.children;
				node_id = treeNode.id;
			} else if (treeNode.dtype == "metric") {
				metrics.push({
					id : treeNode.id,
					name : treeNode.name
				})
				node_id = treeNode.pId;

				curmetric_id = treeNode.id;
				curnode = node_id;
				//添加一个下拉框选中时间
				htmlfill = htmlfill + " <table style=\"margin-bottom:5px;\">  ";
				htmlfill = htmlfill + "  <tr> <td> <div class=\"select\">    ";
				htmlfill = htmlfill
						+ "  <select  id=\"selectday\" name='make'>     ";
				htmlfill = htmlfill
						+ " 				<option value='3' selected >3天</option>   ";
				htmlfill = htmlfill + " 				<option value='7' >7天</option>   ";
				htmlfill = htmlfill + " 				<option value='15'>15天</option>  ";
				htmlfill = htmlfill + " 				<option value='30'>30天</option>  ";
				htmlfill = htmlfill + " 				<option value='80'>80天</option>  ";
				htmlfill = htmlfill + " 			</select> </td>    ";
				htmlfill = htmlfill
						+ " 			<td><button onclick=\"selectChart()\" style =\"margin-left:5px;\" type=\"button\" class=\"btn btn-default btn-xs\">查询</button></td></tr>   ";
				htmlfill = htmlfill + " </table> ";
			} else {
				return;
			}

			for (var i = 0; i < metrics.length; i++) {
				var vid = hex_md5(node_id + metrics[i].id);
				htmlfill = htmlfill
						+ ' <div class="row">                                                                 ';
				htmlfill = htmlfill
						+ '     <div class="col-sm-12 col-md-12">                                             ';
				htmlfill = htmlfill
						+ '         <div class="panel panel-default">                                         ';
				htmlfill = htmlfill
						+ '             <div style="text-decoration:none;text-shadow:0 1px 0 #fff;color:#555 ; font-size:13px ;padding-right: 0px;  padding-left: 10px; padding-top: 2px; padding-bottom: 2px" class="panel-heading"> '
						+ metrics[i].name + ' </div>';
				htmlfill = htmlfill
						+ '             <div class="panel-body"  id="'+vid+'" ></div>  ';
				htmlfill = htmlfill
						+ '         </div>                                                                    ';
				htmlfill = htmlfill
						+ '     </div>                                                                        ';
				htmlfill = htmlfill
						+ ' </div>                                                                            ';
			}
			$("#resourceright").html(htmlfill);
			//填充数据
			for (var i = 0; i < metrics.length; i++) {
				$.ajax({
					type : "POST",
					url : project + "/api/mn/queryResourceByMetric.do",
					data : {
						metric_id : metrics[i].id,
						node_id : node_id
					},
					dataType : 'json',
					success : function(res) {
						var mdata = res.data;
						var vid = hex_md5(mdata.node_id + mdata.metric_id);
						console.log(vid);
						showinit(mdata.option, mdata.showtype, vid);
					}
				});
			}
		}

		function showinit(option, type, id) {
			if (type == "chart") {
				$('#' + id).highcharts(option);
			} else if (type == "table") {

			}
		}

		$(document)
				.ready(
						function() {
							$
									.ajax({
										type : "POST",
										url : project + "/api/mn/queryMenus.do",
										dataType : 'json',
										success : function(res) {
											console.log(setting, res)
											var treeObj = $.fn.zTree.init(
													$("#treeDemo"), setting,
													res.data);
											/*展开第一个节点*/
											treeObj
													.expandNode(treeObj
															.getNodes()[0],
															true, false);
											/*获取第一个节点数据*/
											treeObj.selectNode(treeObj
													.getNodes()[0].children[0]);
											treeObj.setting.callback
													.onClick(
															null,
															treeObj.setting.treeId,
															treeObj.getNodes()[0].children[0],
															'1');
										}
									});
						});
	</script>




</body>
</html>